<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-04-23 20:28:14
 * @LastEditTime: 2020-04-25 14:31:24
 * @FilePath: \blog-pages\src\views\admin\InitUser.vue
 * @Description: 初始化界面
 -->
<template>
  <div class="con rounded">
    <h4 class="text-center text-secondary">创建账户</h4>
    <b-form-group label="用户名" class="text-muted">
      <b-form-input
        v-model="username"
        placeholder="请输入用户名"
        :state="usernameState"
        aria-describedby="username-feedback"
      ></b-form-input>
      <b-form-invalid-feedback id="username-feedback">用户名不能为空</b-form-invalid-feedback>
    </b-form-group>
    <b-form-group label="密码" class="text-muted">
      <b-form-input
        v-model="password"
        placeholder="请输入密码"
        :state="passwordState"
        aria-describedby="password-feedback"
        type="password"
      ></b-form-input>
      <b-form-invalid-feedback id="password-feedback">密码不能为空</b-form-invalid-feedback>
    </b-form-group>
    <b-form-group label="确认密码" class="text-muted">
      <b-form-input
        v-model="ensurePwd"
        placeholder="请再次输入密码"
        :state="ensurePwdState"
        aria-describedby="ensure-pwd-feedback"
        type="password"
      ></b-form-input>
      <b-form-invalid-feedback id="ensure-pwd-feedback">两次密码不一致</b-form-invalid-feedback>
    </b-form-group>
    <hr />
    <b-btn variant="outline-primary" @click="register" :disabled="!btnState">创建</b-btn>
  </div>
</template>
 
 <script>
import urls from "@/request/url";
export default {
  name: "InitUser",
  data() {
    return {
      username: "",
      password: "",
      ensurePwd: ""
    };
  },
  computed: {
    usernameState() {
      return this.username.trim() != "";
    },
    passwordState() {
      return this.password.trim() != "";
    },
    ensurePwdState() {
      return this.password == this.ensurePwd;
    },
    btnState() {
      return this.usernameState && this.passwordState && this.ensurePwdState;
    }
  },
  methods: {
    register() {
      this.$axios
        .post(urls.comm.initUser, {
          username: this.username,
          password: this.password
        })
        .then(res => {
          this.$router.push("/init/blog");
        });
    }
  }
};
</script>
 
 <style scoped>
.con {
  padding: 20px 40px;
  width: 350px;
  height: 450px;
  margin: auto;
  margin-top: 100px;
  background-color: #fff;

  border: 1px solid rgba(183, 183, 183, 0.47);
}
</style>
